<!DOCTYPE html>
<html>

<head>
    <style>
        .sky {
            position: relative;
            width: 100%;
            height:400px;
            background-color: #000033;
            overflow: hidden;
            animation: skyColor 15s infinite linear;
        }

        .sun {
            position: absolute;
            bottom: -50px;
            left: -50px;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-color: #ffcc00;
            box-shadow: 0 0 30px 10px rgba(255, 204, 0, 0.7);
            animation: sunPath 15s infinite linear;
        }

        @keyframes skyColor {
            0% {
                background-color: #000033;
            }

            /* 夜晚 */
            25% {
                background-color: #4a86e8;
            }

            /* 白天 */
            50% {
                background-color: #4a86e8;
            }

            /* 白天 */
            75% {
                background-color: #ff9966;
            }

            /* 黄昏 */
            100% {
                background-color: #000033;
            }

            /* 夜晚 */
        }

        @keyframes sunPath {
            0% {
                bottom: -50px;
                left: -50px;
            }

            25% {
                bottom: 150px;
                /* 最高点 */
                left: 25%;
            }

            50% {
                bottom: 200px;
                left: 50%;
            }

            75% {
                bottom: 150px;
                left: 75%;
            }

            100% {
                bottom: -50px;
                left: calc(100% + 50px);
            }
        }

        .dd-menu{
            content: '1111';
        }
    </style>
</head>

<body>

    <div class="sky">
        <div class="sun"></div>
    </div>

    <div class="sky">
        <div class="sun"></div>
    </div>
</body>

</html>